<template>
  <div class="tags">
    <el-tag v-for="(tag,index) in tags" :key="tag.name"
            :closable="tag.name !== 'home'"
            :effect="tag.name === currentMenu ? 'dark' : 'plain'"
            @click="handleMenu(tag)"
            @close="closeMenu(tag,index)"
    >{{tag.meta.title}}</el-tag>
  </div>
</template>
<script setup>

import { computed, ref } from 'vue'
import { useSettingStore } from '@/store/index.js'
import { useRouter } from 'vue-router'
const router = useRouter()
var settingStore = useSettingStore()
const tags = computed(()=> settingStore.tags)
const currentMenu = computed(()=>settingStore.currentMenu)
const handleMenu = (tag) => {
  router.push(tag.name)
  settingStore.selectMenu(tag)
}
const closeMenu = (tag,index) => {
  settingStore.closeMenu(tag)
  //如果关闭的tag不是当前页面，直接关闭
  if(tag.name !== currentMenu.value){

  }else if(index === settingStore.tags.length){
    //如果关闭的tag是当前页面，则跳转到第一个tag
    router.push(tags.value[index-1].name)
    settingStore.selectMenu(tags.value[index-1])
  }else{
    //如果关闭的tag是当前页面，则跳转到第一个tag
    router.push(tags.value[index].name)
    settingStore.selectMenu(tags.value[index])
  }

}
</script>

<style scoped lang="less">
.tags{
  margin: 20px 0 10px 20px;
}
.el-tag{
  margin-right: 10px;
}
</style>
